<template>
  <div class="departments-container">
    <div class="app-container">
      <!-- 组织架构 -->
      <el-card v-loading="loading" class="tree-card">
        <!-- 用了一个行列布局 -->
        <!-- 顶部公司名称负责人操作部分 -->
        <treeToolsVue
          :node-data="company"
          :is-root="true"
          @openDialog="openDialog"
        />
        <el-tree :data="departs" :props="defaultProps">
          <template #default="{data}">
            <!-- 部门列表部分 -->
            <treeToolsVue
              :node-data="data"
              @delDeptsFn="getDepartmentslist()"
              @openDialog="openDialog"
              @editDepts="editDepts"
            />
          </template>
        </el-tree>
      </el-card>
      <!-- 弹窗组件 -->
      <addDeptVue
        ref="addDept"
        :dialog-visible.sync="dialogVisible"
        :original-departs="originalDeparts"
        :node-data="nodeData"
        @addDept="getDepartmentslist()"
      />
      <!--  @closeDislog="dialogVisible = false" -->
    </div>
  </div>
</template>

<script>
import treeToolsVue from './components/tree-tools.vue'
import addDeptVue from './components/add-dept.vue'
import { getDepartmentsApi } from '@/api/departments'
import { recursionDepartsFn } from '@/utils/index'
export default {
  components: {
    treeToolsVue,
    addDeptVue
  },
  data() {
    return {
      loading: false,
      dialogVisible: false,
      departs: [
        // {
        //   name: '总裁办',
        //   manager: '曹操',
        //   children: [{ name: '董事会', manager: '曹丕' }]
        // },
        // { name: '行政部', manager: '刘备' },
        // { name: '人事部', manager: '孙权' }
      ],
      originalDeparts: [], // 组织架构的原始数据
      company: { name: '苏州传智教育', manager: '负责人' },
      defaultProps: {
        // 映射关系
        // tree组件原本的label映射成title
        // tree组件原本的children映射成son
        label: 'name',
        children: 'children'
      },
      nodeData: {} // 点击添加子部门拿到当前的部门
    }
  },
  created() {
    // 页面进来就要展现部门列表数据
    this.getDepartmentslist()
  },
  methods: {
    async getDepartmentslist() {
      // 加载数据之前，要让loading转起来
      this.loading = true

      // 拿到组织架构的部门列表接口数据
      const {
        data: { depts, companyName, companyManage }
      } = await getDepartmentsApi()
      this.company.name = companyName // 从数据的data里拿出公司名称
      this.company.manager = companyManage // 从数据的data里拿出公司负责人
      this.company.id = '' // 这里设一个假数据，让顶部公司部分有个id

      this.originalDeparts = depts // 组织架构的原始数据
      // console.log(depts)

      // 调用递归方法处理数据渲染到页面
      const departs = recursionDepartsFn(depts, '')
      // 接口返回的数据，都是同级的
      // pid：-1:代表顶级组织架构
      // pid: 空字符串：代表一级组织架构
      // pid: 不为空：代表父级组织架构的id
      this.departs = departs // 把筛选出来的一级二级部门给上面的树形结构
      this.loading = false // 请求完数据，loading关闭
    },

    // 点击新增部门触发的方法
    openDialog(data) {
      // 这个data就是子组件传过来的nodeData
      this.dialogVisible = true // 打开添加部门弹窗
      this.$refs.addDept.getSimpleList() // 拿到子组件的部门列表负责人数据
      this.nodeData = data
      this.$refs.addDept.showtitle = '新增部门'
    },
    // 点击编辑部门触发的方法
    editDepts(nodeData) {
      this.$refs.addDept.showtitle = '编辑部门'
      this.$refs.addDept.getSimpleList() // 拿到子组件的部门列表负责人数据
      this.dialogVisible = true
      this.nodeData = nodeData
      this.$refs.addDept.getDepartmentsDetail(this.nodeData.id) // 调用部门详情方法的同时传递接口需要的id参数
    }
  }
}
</script>

<style lang="scss" scoped>
.tree-card {
  padding: 30px 30px;
  font-size: 14px;
}
.el-tree {
  ::v-deep {
    // 小三角的样式, 去掉默认的小三角的旋转效果
    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    // 有子节点 且未展开 +
    .el-icon-caret-right:before {
      background: url('~@/assets/common/a3fa7ee1b0a0bb945e489355115adfe.png')
        no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 有子节点 且已展开 -
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
      background: url('~@/assets/common/81a104d6d701ed6ac12d585a2af9beb.png')
        no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 没有子节点
    .el-tree-node__expand-icon.is-leaf::before {
      background: url('~@/assets/common/591115f46c226948385cfd635effd78.png')
        no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
  }
}
</style>
